<template>
  <div class="process-box edit-dialog" v-loading="loading">
    <div class="process-top">
      <el-steps
        :active="activeIndex"
        process-status="process"
        finish-status="success"
        align-center
      >
        <el-step
          v-for="item in state.allNodes"
          :key="item.id"
          :title="item.nodeName"
          :status="item.status"
        />
      </el-steps>
    </div>
    <div class="process-bottom">
      <el-timeline>
        <el-timeline-item
          :timestamp="item2.approveTime"
          placement="top"
          :hollow="true"
          type="primary"
          v-for="item2 in state.approvedList"
          :key="item2.id"
        >
          <el-card>
            <h4>{{ item2.processNodeNameFrom }}</h4>
            <div class="process-line" v-if="item2.viewType == 1">
              <span>
                审核结果：{{ formatDictCode('SHJG', item2.approveResult) }}
              </span>
              <span>经办人：{{ item2.approveUserName || item2.modifyBy }}</span>
            </div>
            <div class="process-line">
              <span>{{ item2.approveComment }}</span>
            </div>
            <div class="process-line" v-show="(item2.viewType == 5)">
              <span>公示周期：{{ item2.extra?.begin }}～{{item2.extra?.end}}</span>
            </div>
            <div class="process-line" v-show="(item2.viewType == 5)">
              <span>公示渠道：{{ formatDictCode('GSQD',item2.extra?.channel) }}</span>
            </div>
            <div class="process-line" v-show="(item2.viewType == 4)">
              <span>评定总分：{{ item2.extra?.total }}分</span>
            </div>
            <div class="process-line" v-show="(item2.viewType == 4)">
              <span>评定等级：{{  formatDictCode('CH004',item2.extra?.level) }}</span>
            </div>
            <div class="process-line" v-show="item2.viewType == 3">
              <span>抽取人数：{{ item2.extra?.num }}人</span>
            </div>
            <div class="process-line" v-show="item2.viewType == 3">
              <span>专家名单：{{ item2.extra?.names }}</span>
            </div>
            <div class="process-line" v-if="item2.approveFile">
              <pub-upload
                :key="keyValue"
                v-model:bizId="item2.approveFile"
                limit="5"
                disabled
                :file-size="8"
              />
            </div>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>
    <div class="form-item-btn-group">
      <el-button class="btn-form-close" type="primary" @click="close()">关闭</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onBeforeMount } from 'vue'
import { approveList } from '@/api/approve.js'
import { dictStore } from '@/pinia/modules/dict'
const dictStoreData = dictStore()
const props = defineProps({
  requestUrl: {
    type: String
  },
  id: {
    type: String
  }
})
const emit = defineEmits(['close'])
const state = reactive({
  allNodes: [],
  approvedList: []
})
const status = ref('')
const loading = ref(false)
const currentNodeId = ref('')
const activeIndex = ref(0)
const keyValue = ref(new Date().getTime())
const getActiveNum = id => {
  let index = state.allNodes.findIndex(item => {
    return item.id == id
  })
  if (id == '') {
    // 前端添加结束状态
    activeIndex.value = index + 1
  } else {
    activeIndex.value = index
  }
}

const close = () => {
  emit('close')
}

const formatDictCode = (code, val) => {
  const target = dictStoreData.dict.find(item => item.code === code)
  if (target && (val || val === 0 || val === '0')) {
    let res = ''
    val
      .toString()
      .split(',')
      .forEach((item, index) => {
        const a = target.children.find(item1 => item1.code == item)
        if (a) {
          res += `${index === 0 ? '' : ','}${a.name}`
        } else {
          res += ''
        }
      })
    return res
  }
  return '-'
}

const getProcessList = async () => {
  loading.value = true 
  let res = await approveList(props.requestUrl, props.id)
  if (res.succeed) {
    console.log(res.data)
    res.data.nodes.push({
      id: '',
      nodeName: '结束',
      processId: null,
      roleId: null,
      roleName: null,
      sort: 999999,
      type: 999999,
      userId: null
    })
    state.allNodes = res.data.nodes
    state.approvedList = res.data.histories
    let error = false
    if (res.data.histories && res.data.histories.length > 0) {
      error = res.data.histories[0].approveResult == 2
      if (error) {
        state.allNodes.find(v => v.id == res.data.currentNodeId).status =
          'error'
      }
    }
    if (!error && res.data.status == 2) {
      // 前端添加结束状态
      res.data.currentNodeId = ''
    }
    currentNodeId.value = res.data.currentNodeId
    getActiveNum(res.data.currentNodeId)
    status.value = res.data.status
  }
  loading.value = false
  keyValue.value = new Date().getTime()
}

onBeforeMount(() => {
  getProcessList()
})
</script>
<style lang="scss" scoped>
.process-bottom {
  margin-top: 20px;
}
.process-line {
  margin: 10px 0;
  span {
    margin-right: 30px;
  }
}
</style>
